<template>
  <div class="container">
    <template>
       <div class="search_head">
         <div class="search_head_left">
          <el-button type="warning" icon="el-icon-zoom-in" @click="dialogFormVisible = true" style="margin-left:20px" class="btn">高级查找
          </el-button>
          <el-button type="primary" class="btn" @click="add_goods()"
             icon="el-icon-circle-plus-outline">商品</el-button>
         <el-button type="danger" class="btn" @click="open" icon="el-icon-remove-outline">批量删除</el-button></div>
        <div class="search_head_right"> 
          <el-input prefix-icon="el-icon-search" v-model="input" placeholder="请输入内容" style="width:200px" ></el-input>&nbsp;
          <el-button type="success"  icon="el-icon-search" circle class="btn"></el-button>
        </div>
      </div>
       <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
         <el-form :model="add_form"  :label-position=" labelPosition">
          <div class="add_form">
              <div>
                <el-form-item label="商品名称" :label-width="formLabelWidth" >
                  <el-input v-model="add_form.goodName" autocomplete="off" placeholder="商品名(必填)"></el-input>
                </el-form-item>
                <el-form-item label="商品条形码" :label-width="formLabelWidth" >
                  <el-input v-model="add_form.goodISBN" autocomplete="off" placeholder="商品编码"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" :label-width="formLabelWidth" >
                  <el-input v-model="add_form.goodAmount" autocomplete="off" placeholder="商品数量(必填)"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                  <el-input v-model="add_form.goodPrice" autocomplete="off"  placeholder="商品价格(必填)"></el-input>
                </el-form-item>
                  <el-form-item label="商品规格" :label-width="formLabelWidth">
                  <el-input  v-model="add_form.goodSpec" autocomplete="off" placeholder="商品规格(必填)"></el-input>
                </el-form-item>
                </div>
                   <div>
                <el-form-item label="商品单位" :label-width="formLabelWidth" >
                  <el-input v-model="add_form.goodUnit" autocomplete="off" placeholder="商品单位"></el-input>
                </el-form-item>
                <el-form-item label="商品产地" :label-width="formLabelWidth" >
                  <el-input v-model="add_form.goodPoo" autocomplete="off" placeholder="商品产地"></el-input>
                </el-form-item>
                <el-form-item label="商品供应商" :label-width="formLabelWidth" >
                  <el-input v-model="add_form.suppEncode" autocomplete="off" placeholder="商品供应商"></el-input>
                </el-form-item>
                <el-form-item label="商品状态" :label-width="formLabelWidth">
                  <el-input v-model="add_form.stateLabel" autocomplete="off"  placeholder="商品状态"></el-input>
                </el-form-item>
                  <el-form-item label="所属仓库" :label-width="formLabelWidth">
                  <el-input  v-model="add_form.goodGroup" autocomplete="off" placeholder="所属仓库"></el-input>
                </el-form-item>
                </div>
          </div>
          <el-form-item label="商品图片" :label-width="formLabelWidth">
         
              <el-upload
                    ref="upload"                      
                    :http-request="httpRequest"
                    action="########"
                    :file-list="fileList"           
                    list-type="picture-card"        
                    multiple                          
                    :limit="limitNum"              
                    :auto-upload="false"           
                    :accept="'.jpg, .png,'"
                    :before-upload="beforeUploadFile" 
                    :on-change="fileChange"         
                    :on-exceed="exceedFile"        
                    :on-success="handleSuccess"     
                    :on-error="handleError"        

                    
                    >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{file}">
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="file.url" alt=""
                        >
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                            <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                            <i class="el-icon-download"></i>
                          </span>
                          <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                          >
                            <i class="el-icon-delete"></i>
                          </span>
                        </span>
                      </div>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="add_form.img" alt="">
                  </el-dialog>
                </el-form-item>
                 <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input  v-model="add_form.remark" autocomplete="off" placeholder="填写备注"></el-input>
                </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="add_goods_cancel()">取消添加</el-button>
            <el-button type="primary" @click="add_goods_determine()">确认添加</el-button>
        </div>
      </el-dialog> 
      <div class="formContainer">
      <el-table :data="tableData" border  style="width:100%  " size="medium" height="570" :header-cell-style="{ textAlign: 'center' }"
             :cell-style="{ textAlign: 'center' }">
        <el-table-column  type="selection" width="40"></el-table-column>
        <el-table-column prop="id" label="商品id" width="50" fixed="left">
        </el-table-column>
        <el-table-column prop="goodName" label="商品名" width="80">
        </el-table-column>
        <el-table-column prop="goodEncode" label="商品编码" width="100">
        </el-table-column>
        <el-table-column prop="goodUnit" label="商品单位" width="100">
        </el-table-column>
        <el-table-column prop="goodAmount" label="商品数量" width="90">
        </el-table-column>
        <el-table-column prop="goodPrice" label="商品价格" width="100">
        </el-table-column>
        <el-table-column prop="goodSpec" label="商品规格" width="100">
        </el-table-column>
      
         <el-table-column prop="goodImg" label="商品图片" width="160.5">
          <template slot-scope="scope">
                <img v-if="scope.row.goodImg" :src="scope.row.goodImg" style="height: 50px"/>
              <el-button v-else type="primary" icon="el-icon-goods" size="mini" circle @click="handleEdit(scope)"></el-button>

              </template>
        </el-table-column>
        <el-table-column prop="goodGroup" label="所属仓库" width="90">
        </el-table-column>
        <el-table-column prop="stateLabel" label="商品状态" width="130">
        </el-table-column>
        <el-table-column prop="goodAddTime" label="商品添加时间" width="180">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="90">
        </el-table-column>
        <el-table-column label="操作" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="handleEdit(scope)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="handleDelete(scope)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination align="center" style="margin: 8px" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="all">
        </el-pagination>
    </div>
    </template>
  </div>
</template>
  <script>
  import {get_goods_data,add_goods} from "@/api/api.js";
  export default {
    data(){
    return {
       labelPosition: 'right',
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      dialogFormVisible:false,
      formLabelWidth:'120px',
       pageIndex:1,//页码
      pageSize:10,//页面信息商品个数
      add_form: {
       goodISBN:'43',//ISBN编码
       goodName:'43',//商品名称
       goodAmount:11,//商品数量
       goodUnit:'22',//商品单位
       goodPrice:'454',//商品价格
       goodGroup:'56',//商品仓库
       goodSpec:'676',//商品规格
       remark:'67',//商品备注
       img:'',//商品图片
       stateLabel:'67865',//商品状态
       goodPoo:'7657',//商品产地
       suppEncode:'767',//商品供应商
      },
      tableData:[],
       limitNum: 20,
      fileList: [], //上传文件列表
      file: [], //上传文件信息
      // dialogImageUrl: "", //缩略图
      dialogVisible: false, //缩略图开关
      UploadSwitch: false,
    }
  },
  created() {
    this.get_goods_data()

  },
  methods: {
    //获取商品信息
    get_goods_data(){
      get_goods_data(this.pageIndex,this.pageSize).then(res=>{
        console.log(res,'获取商品信息')
        if(res.data.code == 200){
            let por1=[];
          por1=res.data.data.list;
         for(let i=0;i<por1.length;i++){
                   por1[i].goodAddTime=this.dayjs(por1[i].goodAddTime).format("YYYY-MM-DD HH:mm:ss"); 
            }
          console.log(por1,"por1");
          this.tableData = por1
          // this.tableData = res.data.data.list
        }
     })
    },
    //添加商品开关控制
    add_goods(){
      this.dialogFormVisible = true;
     
    },
     fileChange(file, fileList) {
      this.fileList = fileList;  //这个函数***非常关键***
    },
    httpRequest(file) {
      //这里啥都不用写。。。 想不到吧
    },
    //确认添加商品操作
    add_goods_determine(){
      // 文件状态改变时的钩子
    // submitUpload(file) {
      for (let index in this.fileList) {
        let extension = this.fileList[index].name.substring(
          this.fileList[index].name.lastIndexOf(".") + 1
        );
        let size = this.fileList[index].size/ 1024 / 1024 ;
        /* 验证上传格式  extension后缀名 */
        if ( 
          extension !== "png" &&
          extension !== "jpg" 
        )  {
          console.log(extension);
          this.$notify.warning({
            title: "警告",
            message: `只能上传jpg,png,格式的文件`,
          });
          return;
        }
        /* 验证上传大小 */ 
        if (size > 10) {
          console.log(size,'size就回家吧')
          this.$notify.warning({
            title: "警告",
            message: `文件大小不得超过10M`,
          });
          return;
        }
      }
      if (this.fileList.length === 0) {
        this.$message.warning("请选取文件");
        return;
      }
      this.$refs.upload.submit(); //执行此步骤 相当于执行 http-request 的自定义实现方法

      this.formData = new FormData();
      //因为要传一个文件数组过去，所以要循环append
      this.fileList.forEach((item) => {
        this.formData.append("files", item.raw);
      });
      console.log(this.formData,'this.formData')
      this.formData.append("projectId", this.form.projectId);
      this.formData.append("fileType", this.fileType); 
      
       add_goods(this.add_form).then((res) => {
            //自行处理各种情况
            console.log(res, "上传成功点击上传服务器 下标为", this.upLoadIndex); 
            this.$emit("onChangeOpen", true);
            this.$message({
              message: "文件上传成功",
              type: "success",
            });
          })
        // add_goods(this.add_form).then(res=>{
        //         console.log(res,"添加商品")
        //       })
    },
    // 编辑操作
    handleEdit(e){
      console.log(e)
    },
    //删除操作
    handleDelete(e){
      console.log(e)
    },
    //商品缩略图
    beforeRemove(file) {
      return this.$confirm(`确定移除【${file.name}】,是否继续？`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning',
      })
      },
     async handleRemove(file,fileList){
          fileList.push(file);
          const result = await fileDelete(file.name);
          if(result.obj){
            this.$message({
              type:'success',
              message: '删除成功！'
            })
          }else{
              this.$message({
              type:'error',
              message: '删除失败！'
            })
          }
          return fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
  }
  }
  </script>
  
  <style lang="less" scoped>
.search_head{
        display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  
    .search_head_left{
       display:flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    }
     .search_head_right{
      margin-right: 15px;
     }
}
.add_form{
  display:flex;
}

  </style>